<template>
    <div>
      <button @click="startAnimation">点击开始动画</button>
      <div class="box" :style="{ animationDelay: animationDelay + 's' }">
        {{ msg }}
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        animationDelay: 0,
        msg: "Hello",
      };
    },
    methods: {
      startAnimation() {
        this.animationDelay += 0.5;
      },
    },
  };
  </script>
  
  <style scoped>
  .box {
    width: 100px;
    height: 100px;
    background-color: blue;                
    animation: move 2s linear infinite;
  
    /* 行高可以使得字体居中 */
    line-height: 100px;
    color: aliceblue;
  }
  
  @keyframes move {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(100%);
    }
  }
  </style>
  